<template>
  <div>
    <div class="container">
      <div class="handle-box">
        <el-select v-model="query.QueryType" placeholder="查询方式" class="handle-select mr10">
          <el-option key="1" label="问题标题" value="question_title"></el-option>
          <el-option key="2" label="问题内容" value="question_content"></el-option>
          <el-option key="3" label="问题日期" value="create_time"></el-option>
        </el-select>
        <div v-if="query.QueryType==='create_time'" class="handle-select mr10 selectDateBox">
          <el-date-picker
              v-model="DateValue"
              type="datetimerange"
              range-separator="To"
              start-placeholder="Start date"
              end-placeholder="End date"
          />
        </div>
        <div v-else>
          <el-input v-model="query.SearchInput" placeholder="请输入" class="handle-input mr10"></el-input>
        </div>
        <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
      </div>

      <el-table
          :data="tableData"
          height="550"
          border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <el-table-column prop="question_id" label="ID" width="55" align="center"></el-table-column>
        <el-table-column prop="user_id" label="作者ID" align="center"></el-table-column>
        <el-table-column prop="question_title" label="问题标题" align="center"></el-table-column>
        <el-table-column prop="question_content" label="问题详情" align="center"></el-table-column>
        <el-table-column prop="create_time" label="发布时间" align="center"></el-table-column>
        <el-table-column label="操作" width="220" align="center">
          <template #default="scope">
            <el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index, scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts" name="basetable">
import {ref, reactive, watch} from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search } from '@element-plus/icons-vue';
import { useRouter } from "vue-router";
import axios from "axios";

interface TableItem {
  question_id: number;
  user_id: number;
  question_title: string;
  question_content: string;
  create_time: string;
}

const DateValue = ref<[Date, Date]>([
  new Date(),
  new Date(),
])
const size = ref<'default' | 'large' | 'small'>('default')
const StartDate = ref('')

const query = reactive({
  QueryType: 'question_title',
  SearchInput: '',
});
const allData = ref<TableItem[]>([]);
const tableData = ref<TableItem[]>([]);

// 获取表格数据
const getData = () => {
  axios.get(`http://localhost:8080/question?current_id=0`)
      .then(res=>{
        allData.value=res.data.data
        tableData.value=allData.value
      })
};
getData();

// 查询操作
const handleSearch = () => {
  if(query.QueryType=="create_time"){
    if(DateValue.value==null){
      tableData.value=allData.value
    }
    //console.log(startDate,endDate,new Date(allData.value[0].create_time))
    tableData.value=[]
    for(let i=0;i<allData.value.length;i++){
      let date=new Date(allData.value[i].create_time)
      if(DateValue.value[0]<=date&&DateValue.value[1]>=date){
        tableData.value.push(allData.value[i])
      }
    }
  }else{
    if(query.SearchInput==""){
      tableData.value=allData.value
    }else{
      tableData.value = []
      for(let i=0;i<allData.value.length;i++){
        if(allData.value[i][query.QueryType]!=null&&allData.value[i][query.QueryType].toLowerCase().indexOf(query.SearchInput.toLowerCase())!=-1){
          tableData.value.push(allData.value[i])
        }
      }
    }
  }
};

// 删除操作
const handleDelete = (index: number, row: any) => {
  ElMessageBox.confirm('确定要删除吗?', '提示', {
    type: 'warning'
  })
      .then(() => {
        axios.delete(`http://localhost:8080/question/`+row.question_id)
            .then(res=>{
              if(res.data.data){
                ElMessage.success("删除问题成功!")
                let deleteID = tableData.value[index].question_id
                tableData.value.splice(index,1)
                for(let i=0;i<allData.value.length;i++){
                  if(allData.value[i].question_id===deleteID){
                    allData.value.splice(i,1)
                    break;
                  }
                }
              }else{
                ElMessage.error("删除问题失败!")
              }
            })
      })
      .catch(() => {});
};
const router = useRouter()
watch(
    () => router.currentRoute.value,
    (newRoute) => {
      if(newRoute.name=="question"){
        getData()
      }
    },
    { immediate: true }
);
</script>

<style scoped>
.handle-box {
  width: auto;
  margin-bottom: 20px;
  display: flex;
  justify-content: left;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #F56C6C;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
.selectDateBox {
  width: auto;
  display: flex;
  justify-content: left;
}
.DateTip {
  margin-top: 5px;
  margin-right: 5px;
  margin-left: 10px;
}
</style>
